<template>
  <ul class = "inner_button">
    <li v-if = "permission.add">
      <el-button @click = "btnOperation(1)" link title = "" type = "primary">
        <user-icon icon = "plus" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "新增">新增</el-tooltip>
      </el-button>
    </li>
    <li v-if = "permission.batchAdd">
      <el-button @click = "btnOperation(11)" title = "" type = "primary" link>
        <user-icon icon = "plus-square" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "批量新增">批量新增</el-tooltip>
      </el-button>
    </li>
    <li v-if = "permission.batchDelete">
      <el-button @click = "btnOperation(4)" link title = "" type = "danger">
        <user-icon icon = "minus-square" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "批量删除">批量删除</el-tooltip>
      </el-button>
    </li>
    <li v-if = "permission.view">
      <el-button @click = "btnOperation(5)" link title = "" type = "primary">
        <user-icon icon = "sync" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "刷新">刷新</el-tooltip>
      </el-button>
    </li>
    <li v-if = "permission.download">
      <el-button @click = "btnOperation(6)" link title = "" type = "primary">
        <user-icon icon = "file-download" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "下载模板">下载模板</el-tooltip>
      </el-button>
    </li>
    <li v-if = "permission.execution">
      <el-button @click = "btnOperation(7)" link title = "" type = "primary">
        <user-icon icon = "play-circle" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "执行">执行</el-tooltip>
      </el-button>
    </li>
    <li v-if = "permission.upload">
      <el-upload
          :auto-upload = "true"
          :on-change = "upload"
          :on-error = "uploadError"
          :on-progress = "uploadProcess"
          :on-success = "uploadSuccess"
          :show-file-list = "false"
          :action = "uploadUrl"
          :headers = "uploadHeaders"
          class = "upload"
          name = "file"
      >
        <el-button link title = "" type = "primary">
          <user-icon icon = "file-upload" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "上传">上传</el-tooltip>
        </el-button>

      </el-upload>
    </li>
    <li v-if = "permission.export">
      <el-button @click = "btnOperation(8)" link title = "" type = "primary">
        <user-icon icon = "file-export" style = "vertical-align: middle;color:#e3e9f2;"/>
        <el-tooltip content = "导出">导出</el-tooltip>
      </el-button>
    </li>
  </ul>
</template>

<script>

export default {
  props: {
    uploadUrl: {type: String, required: true},
    permission: {type: Object, required: true}
  },
  name: "StarHorseButtonList",
  methods: {

    upload(file, fileList) {
      this.$emit("upload", file, fileList);
    },
    /**
     * 上传过程
     */
    uploadProcess(event, file, fileList) {
      this.$emit("uploadProcess", event, file, fileList);
    },
    /**
     * 上传失败
     */
    uploadError(err, file, fileList) {
      this.$emit("uploadError", err, file, fileList);
    },
    /**
     * 上传成功
     */
    uploadSuccess(response, file, fileList) {
      this.$emit("uploadError", response, file, fileList);
    },

    btnOperation(val) {
      this.$emit("btnOperation", val);
    }
  }
}
</script>

<style scoped>

</style>